<template>
  <div id="order">
    <order-nav-bar />
    <scroll class="scroll">
      <order-list :orders="orders" v-if="detectLogin"
    /></scroll>
    <router-view :snapshot="snapshot" />
  </div>
</template>

<script>
import {detectLogin} from 'common/mixin'

import Scroll from "components/common/betterScroll/Scroll";

import OrderNavBar from "./childComps/OrderNavBar";
import OrderList from "./childComps/OrderList";

import { getOrders, getSnapshot } from "network/order";
export default {
  data() {
    return {
      orders: [],
      snapshot: {},
    };
  },
  created() {
    this.getOrders(localStorage.getItem("user_id"));
  },
  mixins: [detectLogin],
  mounted() {
    this.$bus.$on("handleSkipOrderDetail", (index) => {
      this.getSnapshot(
        localStorage.getItem("user_id"),
        this.orders[index].unique_id
      );
    });
  },
  activated() {
    this.getOrders(localStorage.getItem("user_id"));
  },
  methods: {
    getOrders(user_id) {
      getOrders(user_id).then((res) => {
        this.orders = res;
      });
    },
    getSnapshot(user_id, unique_id) {
      getSnapshot(user_id, unique_id).then((res) => {
        this.snapshot = res;
      });
    },
  },
  components: {
    Scroll,
    OrderNavBar,
    OrderList,
  },
};
</script>
<style lang="less" scoped>
#order {
  height: 100vh;
  background-color: #f1f1f1;
  .scroll {
    height: calc(100% - 44px - 49px);
    overflow: hidden;
  }
}
</style>